<HTML>
 <HEAD>
  <TITLE>Ext.toolbar.Paging示例</TITLE>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <link rel="stylesheet" type="text/css" href="../../ext-4.0/resources/css/ext-all.css" />
  <script type="text/javascript" src="../../ext-4.0/bootstrap.js"></script>
  <script type="text/javascript" src="../../ext-4.0/locale/ext-lang-zh_CN.js"></script>
  <script type="text/javascript">
	Ext.onReady(function(){
		var itemsPerPage = 2;//指定分页大小
		   
		var store = Ext.create('Ext.data.Store', {
		    autoLoad: {start: 0, limit: itemsPerPage},
		    fields:['id', 'name', 'age'],
		    pageSize: itemsPerPage, //设置分页大小
		    proxy: {
		        type: 'ajax',
		        url: 'jsonServer.jsp',  //请求的服务器地址
		        reader: {
		            type: 'json',
		            root: 'rows',
		            totalProperty: 'results'
		        }
		    }
		});
		//创建Grid表格组件
		Ext.create('Ext.grid.Panel',{
			title : 'Ext.toolbar.Paging示例',
			renderTo: Ext.getBody(),
			width:400,
			height:150,
			frame:true,
			store: store,
			columns: [//配置表格列
				{header: "id", width: 30, dataIndex: 'id', sortable: true},
				{header: "姓名", width: 80, dataIndex: 'name', sortable: true},
				{header: "年龄", width: 80, dataIndex: 'age', sortable: true}
			],
			bbar: [{
				xtype: 'pagingtoolbar',
				store: store,   //这里需要指定与表格相同的store
				displayInfo: true
			}]
		});
	});
  </script>
 </HEAD>
 <BODY STYLE="margin: 10px"></BODY>
</HTML>